<template>
    <div class="login-box">
        <el-image class="logo" :src="require('@/assets/tabs/logo.jpg')"></el-image>
        <div class="bg-box">
            <div class="login">
                <p class="loginwelcome">欢迎登录10千伏配变电压治理小工具</p>
                <el-form class="myform" :model="form" :rules="rules" ref="form">
                    <el-form-item prop="user">
                        <el-input v-model="form.user" prefix-icon="el-icon-user" placeholder="请输入帐号"></el-input>
                    </el-form-item>
                    <el-form-item prop="pwd">
                        <el-input v-model="form.pwd" prefix-icon="el-icon-lock" placeholder="请输入密码"
                            show-password></el-input>
                    </el-form-item>
                    <el-button class="loginbtn" type="primary" @click="submit">登录</el-button>
                </el-form>
            </div>
        </div>
    </div>
</template>
  
<script>

export default {
    data() {
        return {
            form: {
                user: '',
                pwd: '',
            },
            rules: {
                user: [
                    { required: true, message: "请填写帐号:1~12位字符，可以包含：数字、字母、下划线", trigger: "blur" },
                    {
                        pattern: /^\w{1,12}$/,
                        message: "1~12位字符，可以包含：数字、字母、下划线",
                        trigger: "blur",
                    },
                ],
                pwd: [
                    { required: true, message: "请填写密码:1~12位字符，可以包含：数字、字母、下划线", trigger: "blur" },
                    {
                        pattern: /^\w{1,12}$/,
                        message: "1~12位字符，可以包含：数字、字母、下划线",
                        trigger: "blur",
                    },
                ]
            }
        }
    },
    methods: {
        submit() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.$router.push('/home')
                }
            });
        }
    }
}
</script>
<style scope>
.login {
    background-color: rgba(0, 0, 0, 0.5);
    width: fit-content;
    min-width: 350px;
    min-height: 300px;
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
}

.login-box {
    background-color: #FDFBFE;
}

.bg-box {
    height: fit-content;
    min-height: calc(100vh - 80px);
    position: relative;
    background-image: url('@/assets/tabs/bg7.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

.logo {
    height: 80px;
    width: 160px;
    margin-left: 20px;
    display: block;
}

.loginwelcome {
    color: #fff;
    margin: 20px 0;
}

.myform {
    padding: 0 20px;
}

.loginbtn {
    width: 100%;
}
</style>
  